<template class="box" router>
  <div class="box">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="color: #000;font-weight: 800;font-size: 18px;font-style:normal ;">最新公告</span>
        <el-button style="float: right; padding: 3px 0" type="text"></el-button>
      </div>
      <div  class="text item">
        <el-link @click="drawer = true" type="primary" style="position:relative "> 最新公告 点我打开 </el-link>

        <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false">
          <span>我来啦!</span>
        </el-drawer>
      </div>
    </el-card>
    <div class="qwe">
      <div>
        <Bingtu></Bingtu>
      </div>
      <div>
        <router-view></router-view>
        
      </div>
      <div class="rv">
        <el-row :gutter="20">
      <el-col :span="6">
        <div>
          <el-statistic group-separator="," :precision="2" :value="value2" :title="title"></el-statistic>
          <el-statistic title="今日总收入">
            <template slot="formatter"> 4562 </template>
          </el-statistic>

        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-statistic title="总浏览量">
            <template slot="formatter"> 4562 </template>
          </el-statistic>

          <el-statistic title="今日浏览量">
            <template slot="formatter"> 4562 </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-statistic title="总订单量">
            <template slot="formatter"> 123 </template>
          </el-statistic>
          <el-statistic title="今日总订单量">
            <template slot="formatter"> 4562 </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-statistic title="总支付量">
            <template slot="formatter"> 4562 </template>
          </el-statistic>
          <el-statistic title="今日总支付量">
            <template slot="formatter"> 4562 </template>
          </el-statistic>
        </div>
      </el-col>
    </el-row>
      </div>
    </div>
    <div id="test_app">
      <!--为echarts准备一个具备大小的容器dom-->

      <div
        id="main"
        style="width: 100%; height: 520px; background: #fff; top: 50px"
      ></div>
    </div>
    
  </div>
</template>

<script>
import * as echarts from "echarts";
import Bingtu from "../Menu_ca/bingtu.vue";
export default {
  name: "",
  components: { Bingtu },
  data() {
    return {
      like: true,
        value1: 4154.564,
        value2: 2222,
        title: '今年总收入',
        title:'今日总收入',

      drawer: false,
      charts: "",
      opinionData: [
        "155",
        "400",
        "900",
        "800",
        "300",
        "900",
        "270",
        "500",
        "800",
      ], //数据
    };
  },
  methods: {
    drawLine(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        title: {
          left: "3%",
          top: "5%",
          text: "最近一周订单数量", //标题文本，支持使用 \n 换行。
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          align: "right", //文字在前图标在后
          left: "3%",
          top: "15%",
          data: ["近一周"],
          data1: ["近一个月"],
        },
        grid: {
          top: "30%",
          left: "5%",
          right: "5%",
          bottom: "5%",
          containLabel: true,
        },

        toolbox: {
          feature: {
            saveAsImage: {}, //保存为图片
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
          axisTick: {
            alignWithLabel: true, //保证刻度线和标签对齐
          },
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"], //x坐标的名称
        },
        yAxis: {
          type: "value",
          boundaryGap: true,
          splitNumber: 4, //纵坐标数
          interval: 250, //强制设置坐标轴分割间隔
        },

        series: [
          {
            name: "近一周",
            type: "line", //折线图line;柱形图bar;饼图pie
            stack: "总量",
            areaStyle: {
              //显示区域颜色---渐变效果
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgb(255,200,213)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#ffffff", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            itemStyle: {
              color: "rgb(255,96,64)", //改变折线点的颜色
              lineStyle: {
                color: "rgb(255,96,64)", //改变折线颜色
              },
            },
            data: this.opinionData,
            data1: this.opinionData1,
          },
        ],
      });
    },
  },

  // updated: function () {
  //     this.drawCharts()
  // }

  //调用
  mounted() {
    this.$nextTick(function () {
      this.drawLine("main");
    });
  },
};
</script >

<style lang="less" scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  margin-top: 20px;
  margin-left: 20px;
  width: 480px;
  height: 300px;
}
#test_app {
  position: relative;
  left: 0;
  top: 0;
  bottom: 0px;
  right: 0;
  margin-top: -30px;
}
.box-card {
  width: 300px;
}

.bb1 {
  position: absolute;
  margin-top: 100px;
}
.qwe{
  width: 1350px;
  height: 300px;
  position: absolute;
  left: 550px;
  top: 70px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
.rv{
  width: 600px;
  height: 100px;
  position: absolute;
  right: 100px;
  top: 20px;
  margin: 10px 10px 50px 20px ;
}
.like {
    cursor: pointer;
    font-size: 25px;
    display: inline-block;
  }
  .el-statistic{
  margin: 40px;
  }

</style>